<template>
  <div>
    <a-form :model="formState" ref="goodsWeChat">
      <a-form-item name="weChatIds">
        <a-transfer :dataSource="weChatListData" v-model="formState.weChatIds" :listStyle="{ width: '45%', height: '880px' }" :titles="[' 可选公众号', ' 已选公众号']" :render="(item) => item.title" :target-keys="formState.weChatIds" @change="handleTransferChange" filterable show-search></a-transfer>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="GoodsWechatSet" setup>
import { reactive, ref } from 'vue';
import { querySetWechat, setWechat } from '../api';
import { weChatList } from '@apps/ant-bus/src/views/business/platformManage/wechat/data/api';

const goodsWeChat = ref();
const weChatListData = ref();
const userId = ref();
const formState = reactive({
  weChatIds: [],
});

let employeeId = ref();

let goodsId = ref('');

async function setData(data) {
  goodsId = data.goodsId;
  console.info('goodsId', goodsId);
  let weChatIds = await querySetWechat({
    goodsId: goodsId,
    busType: 2,
  });
  weChatList().then((data) => {
    data.map((item) => {
      item.key = item.weChatId;
      item.title = item.weChatName;
    });
    weChatListData.value = data;
    formState.weChatIds = weChatIds;
  });
}

/**
 * 穿梭框change
 * @param targetKeys
 * @param direction
 * @param moveKeys
 */
function handleTransferChange(targetKeys, direction, moveKeys) {
  formState.weChatIds = targetKeys;
  console.info(formState.weChatIds.join(','));
}

/**
 * 提交事件
 */
async function handleSubmit(callback) {
  goodsWeChat.value.validate().then(async () => {
    await setWechat({
      goodsId: goodsId,
      weChatIds: formState.weChatIds.join(','),
      busType: 2,
    });
    callback &&
      callback((parentEmit) => {
        //刷新列表
        parentEmit('success', {
          isUpdate: false,
          values: {},
        });
      });
  });
}

/**
 * 暴露给父组件调用的方法
 */
defineExpose({
  setData,
  handleSubmit,
});
</script>
